<template>
  <div class="app-container">
    <el-card style="margin-bottom: 24px;">
      <el-descriptions title="订单详情" :column="4" border>
        <el-descriptions-item labelClassName="diyLabelClassName" contentClassName="diyContentClassName" label="订单信息：" style="text-align: right">
          {{ form.orderNo }}
        </el-descriptions-item>
        <el-descriptions-item labelClassName="diyLabelClassName" contentClassName="diyContentClassName" label="商品名称：">
          {{ form.goodsName}}
        </el-descriptions-item>
        <el-descriptions-item labelClassName="diyLabelClassName" contentClassName="diyContentClassName" label="买家：">
          {{ form.buyerName }}
        </el-descriptions-item>
        <el-descriptions-item labelClassName="diyLabelClassName" contentClassName="diyContentClassName" label="购买数量：">
          {{ form.totalCount }}
        </el-descriptions-item>
        <el-descriptions-item labelClassName="diyLabelClassName" contentClassName="diyContentClassName" label="实付金额：">
          {{ form.actualPrice }}
        </el-descriptions-item>
        <el-descriptions-item labelClassName="diyLabelClassName" contentClassName="diyContentClassName" label="订单时间：">
          {{ form.createTime }}
        </el-descriptions-item>
        <el-descriptions-item labelClassName="diyLabelClassName" contentClassName="diyContentClassName" label="订单状态：">
          {{ form.status == 0 ? '待支付': form.status == 1 ? '待发货': form.status == 2 ? '已发货': form.status == 3 ? '退款': form.status == 4 ? '退款失败': form.status == 5 ? '取消':'' }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card style="margin-bottom: 24px;">
      <el-descriptions title="收货信息" :column="4" border>
        <el-descriptions-item labelClassName="diyLabelClassName" contentClassName="diyContentClassName" label="收货人姓名：">
          {{ form.consignee }}
        </el-descriptions-item>
        <el-descriptions-item labelClassName="diyLabelClassName" contentClassName="diyContentClassName" label="收货人电话：">
          {{ form.consigneePhone }}
        </el-descriptions-item>
        <el-descriptions-item labelClassName="diyLabelClassName" contentClassName="diyContentClassName" label="收货人地址：">
          {{ form.consigneeAddress }}
        </el-descriptions-item>
        <el-descriptions-item labelClassName="diyLabelClassName" contentClassName="diyContentClassName" label="运单号：">
          {{ form.waybill }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card style="margin-bottom: 24px;">
      <el-descriptions title="分销商信息" :column="4" border>
        <el-descriptions-item labelClassName="diyLabelClassName" contentClassName="diyContentClassName" label="上级推荐人：">
          {{ form.shoppingUser.personName }}
        </el-descriptions-item>
        <el-descriptions-item labelClassName="diyLabelClassName" contentClassName="diyContentClassName" label="手机号：">
          {{ form.shoppingUser.phonenumber }}
        </el-descriptions-item>
        <el-descriptions-item labelClassName="diyLabelClassName" contentClassName="diyContentClassName" label="级别：">
          {{ form.shoppingUser.stratum }}
        </el-descriptions-item>
        <el-descriptions-item labelClassName="diyLabelClassName" contentClassName="diyContentClassName" label="佣金：">
          {{ form.shoppingUser.price }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card style="margin-bottom: 24px;">
      <el-descriptions title="商品信息" :column="4" border>
        <el-descriptions-item labelClassName="diyLabelClassName" contentClassName="diyContentClassName" label="商品标题：">
          {{ form.shoppingGoods.goodsName }}
        </el-descriptions-item>
        <el-descriptions-item labelClassName="diyLabelClassName" contentClassName="diyContentClassName" label="单价：">
          {{ form.shoppingGoods.goodsPrice }}
        </el-descriptions-item>
        <el-descriptions-item labelClassName="diyLabelClassName" contentClassName="diyContentClassName" label="数量：">
          {{ form.shoppingGoods.stock }}
        </el-descriptions-item>
        <el-descriptions-item labelClassName="diyLabelClassName" contentClassName="diyContentClassName" label="原价：">
          {{ form.shoppingGoods.originalPrice }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <div style="text-align: right" v-if="form.goodsId">
      <el-button type="primary" @click="confirm" v-show="form.status == 1">确认发货</el-button>
      <el-button type="danger" @click="close" v-show="form.status != 3 && form.status != 6 && !(form.orderNo && form.orderNo.includes && form.orderNo.includes('YZJHD'))">关闭并退款</el-button>
    </div>
  </div>
</template>
<script>
import {closeRefund, confirmShipment, getOrder} from "@/api/order";

export default {
  data() {
    return {
      id: '',
      form: {
        shoppingUser:{
          personName:'',
          phonenumber:'',
          stratum:0,
          price:''
        },
        shoppingGoods:{
          goodsName:'',
          goodsPrice:0,
          stock:0,
          originalPrice:0
        },
      },
    };
  },
  created() {
    this.id = this.$route.params.id
    if (this.id) {
      getOrder(this.id).then(response => {
        this.form = response.data;
        if(!this.form.shoppingUser){
          this.form.shoppingUser={
            personName:'',
            phonenumber:'',
            stratum:'',
            price:''
          }
        }
        if(!this.form.shoppingGoods){
          this.form.shoppingGoods={
            goodsName:'',
            goodsPrice:'',
            stock:'',
            originalPrice:''
          }
        }
      });
    }
  },
  methods: {
    confirm() {
      this.$prompt('请输入该订单的运单号', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
      }).then(res=>{
        confirmShipment({id:this.id,waybill:res.value}).then(res=>{
          this.$message.success("确认发货成功");
          this.$store.dispatch('tagsView/delView', this.$route)
          this.$router.go(-1);
        })
      })
    },
    close() {
      this.$confirm("是否关闭并退款", "提示").then(() => {
        closeRefund({id:this.id}).then(res=>{
          this.$message.success("操作成功");
          this.$store.dispatch('tagsView/delView', this.$route)
          this.$router.go(-1);
        })
      });
    }
  }
};

</script>

<style>
.diyLabelClassName {
  text-align: center !important;
  width: 150px !important;
}

.diyContentClassName {
  text-align: center !important;
  width: 150px !important;
}
.list-box{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 24px;
}
.list-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ebeef5;
  padding: 24px;
  font-size: 14px;
  border-radius: 4px;
}
.list-item-left{
  display: flex;
  align-items: center;
}
</style>
